<template>
  <div>
    <el-row>
      <el-col :span="24" align="right">
<!--        <el-button type="primary"  @click="uploadBox()">上传附件</el-button>-->
      </el-col>
    </el-row>
    <Table :tableArr="files" :pagination="data.page" :columns="data.columns">
      <template #operate="{ row }">
<!--        <el-button size="small" type="primary" @click="handleDownload(row)">下载</el-button>-->
<!--        <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>-->
      </template>
    </Table>

    <el-dialog
      v-model="data.uploadDialog"
      append-to-body
      width="50%"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template #title>
        <div class="my-header">
          <el-tabs v-model="data.activeName" class="demo-tabs">
            <el-tab-pane label="上传文件" name="first">
              <el-form
                :model="form"
                label-position="left"
                label-width="90px"
                :inline="true"
                class="demo-form-inline"
              >
                <el-row>
                  <el-col :span="13">
                    <el-form-item label="*文件类型：">
                      <SelectOption :options="data.options"> </SelectOption>
                    </el-form-item>
                  </el-col>
                  <el-col :span="13">
                    <el-form-item label="*文件：">
                      <el-upload
                        v-model:file-list="fileList"
                        class="upload-demo"
                        action="/fastDfs/file_info"
                        multiple
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        :before-remove="beforeRemove"
                        :limit="3"
                        :on-exceed="handleExceed"
                      >
                        <el-button type="primary">上传文件</el-button>
                        <template #tip>
                          <div class="el-upload__tip">

                          </div>
                        </template>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.uploadDialog = false">关闭</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { delectFiles, downloadFiles } from '@/views/science/api/common'
import common from '@/views/science/common/common.json'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Table from '@/views/science/components/table/table.vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'
import { addFiles } from '../../api/technicalNorms'

export default {
  components: {
    Table,
    SelectOption,
  },
  props: {
    files: {
      type: Object,
      required: true,
    }
  },
  setup(props,{emit}) {
    let data = reactive({
      activeName: ref('first'),
      columns: common.platformFileHeader,
      page: {
        page: 1,
        limit: 10,
        total: 0,
      },
      options: [
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
        {
          value: 'Option4',
          label: 'Option4',
        },
        {
          value: 'Option5',
          label: 'Option5',
        },
      ],
      uploadDialog: false,
    })

    const form = reactive({
      unit: '',
      personnel: '',
      role: '',
    })

    const handleDownload = async (row) => {
      let res = await downloadFiles(row.id)
      if (res.data.success) {
        console.log(1111)
      }
    }

    const handleDelete = async (row) => {
      let res = await delectFiles(row.id)
      if (res.data.success) {
        emit('dataChange')
      }
    }

    const uploadBox = ()=>{
      data.uploadDialog = true
    }

    const fileList = ref<typeof UploadUserFile[]>([])

    const handleRemove: typeof UploadProps['onRemove'] = (file, uploadFiles) => {
      console.log(file, uploadFiles)
    }

    const handlePreview: typeof UploadProps['onPreview'] = (uploadFile) => {
      console.log(uploadFile)
    }

    const handleSuccess: typeof UploadProps['onSuccess'] = (uploadFile) => {
      console.log(uploadFile)
    }

    const handleError:typeof UploadProps['onError'] = (uploadFile) => {
      ElMessage.warning(
        `文件上传失败`
      )
    }


    const handleExceed: typeof UploadProps['onExceed'] = (files, uploadFiles) => {
      ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${
          files.length + uploadFiles.length
        } totally`
      )
    }

    const beforeRemove: typeof UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
      return ElMessageBox.confirm(`是否删除 ${uploadFile.name} ?`).then(
        () => true,
        () => false
      )
    }


    const save = async () => {
      let params = {
        "fileName": "文件名称",
        "filePath": "http://baidu.com/a.png",
        "fileSize": "25532",
        "fileType": "png",
        "id": "1685926711084089346"
      }
      let res = await addFiles(params)
      if (res.data.success) {
        console.log(1111)
      }
      data.uploadDialog = false
    }

    return {
      data,
      form,

      uploadBox,
      handleDelete,
      handleDownload,
      save,

      fileList,
      handleRemove,
      handlePreview,
      handleExceed,
      handleSuccess,
      handleError,
      beforeRemove,
    }
  },
}
</script>

      <style scoped lang="scss">
</style>
